import { View, Text, StyleSheet,Button } from 'react-native';
import { Circle, 
  Svg, 
  Text as Text2,
  G,
 } from 'react-native-svg';

import React, { useState, useEffect } from 'react';
import Animated, { useSharedValue, useAnimatedStyle, useAnimatedProps,withSpring,withTiming,withRepeat,Easing } from 'react-native-reanimated';
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    textContainer: {
        position: 'absolute',
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 18,
        fontWeight: 'bold',
    },
    box: { width: 200, height: 200, backgroundColor: 'pink' },
    svg: {
      height: 250,
      width: '100%',
    },
});

/**
 *   圆形绕中心可以旋转。
 * 
 * @returns 
 * 
 * 
 */
  export const Loading = () => {
    const rotation = useSharedValue(0); // 旋转动画
    const progress = useSharedValue(0); // 进度动画
  

    //40 也是OK的，修改之后记得要重新跑。
    const radius = 20;
    const circunference = 2 * Math.PI * radius;
  
    const animatedStyle = useAnimatedStyle(() => ({
      transform: [{ rotate: `${rotation.value}deg` }],
    }));
  
    const animatedProps = useAnimatedProps(() => ({
      strokeDashoffset: circunference - (progress.value / 100) * circunference,
    }));
  
    React.useEffect(() => {
      // 启动旋转动画
      rotation.value = withRepeat(
        withTiming(rotation.value + 360, {
          duration: 1000,
          easing: Easing.linear,
        }),
        -1,
        false
      );
  
      // 启动进度动画从0到100，再回到0，循环
      progress.value = withRepeat(
        withTiming(100, {
          duration: 2000,
          easing: Easing.linear,
        }),
        -1,
        true // 循环往返
      );
    }, []);


return <View style={styles.container}>
  <Animated.View style={[animatedStyle]} >
      <Svg height="200" width="200">
        <AnimatedCircle
          cx="50%"
          cy="50%"
          r= {radius}
          stroke="#2c72e5"
          strokeWidth="4"
          fill="none"
          strokeDasharray={circunference}
          strokeLinecap="round"
        animatedProps={animatedProps}
      />
      </Svg>
      </Animated.View>
    </View>
  };

